<template>
  <div>
    <a-row type="flex" class="banner">
      <a-col :span="4" style="position:absolute;top:0;left:0;z-index:9;">
        <div class="banner-tit" @click="menuTag('/game')">
          <div>账号</div>
        </div>

        <div class="banner-tit" @click="menuTag('/game')">
          <div>充值</div>
        </div>
        <div class="banner-tit" @click="menuTag('/game')">
          <div>装备</div>
        </div>
        <div class="banner-tit" @click="menuTag('/game')">
          <div>游戏币</div>
        </div>
        <div class="banner-tit" @click="menuTag('/recruit')">
          <div>招募</div>
        </div>
        <div class="banner-titw">
          <a-col :span="11" class="t" @click="menuTag('/game')">我要买</a-col>
          <a-col :span="2">|</a-col>
          <a-col :span="11" class="t" @click="menuTag('/selectgame')">我要卖</a-col>
        </div>
      </a-col>
      <a-col :span="24">
        <a-carousel arrows :autoplay="true" dotsClass="swiper-dots" class="swiper">
          <img v-for="(item,index) in list" :key="index" :src="item.image" @click="ont(item)" />
          <a slot="customPaging" slot-scope="props">{{props.i + 1}}</a>
        </a-carousel>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { INDEX_BANNER } from "./server";
export default {
  data() {
    return {
      list: []
    };
  },

  created() {
    INDEX_BANNER({ type: "index" }).then(res => {
      if (!res) return;
      this.list = res.data;
    });
  },
  methods: {
    menuTag(path) {
      this.$router.push(path);
    },
    ont(item) {
      window.open(`http://www.itemplay.com/${item.url1}`);
    }
  }
};
</script>

<style lang="less" scoped>
.banner {
  height: 402px;
  position: relative;
  .banner-tit {
    width: 100%;
    height: 66px;
    line-height: 66px;
    font-size: 18px;
    padding-left: 28px;
    color: #fff;
    background: rgba(0, 0, 0, 0.8);
    &:hover div {
      background: rgba(250, 250, 250, 0.3);
    }
    div {
      width: calc(100% + 28px);
      height: 100%;
      margin-left: -28px;
      padding-left: 28px;
      cursor: pointer;
    }
  }
  .banner-titw {
    height: 72px;
    background: #0084ff;
    font-size: 20px;
    text-align: center;

    color: #fff;
    div {
      padding-top: 20px;
      height: 100%;
      cursor: pointer;
    }
    .t:hover {
      background: #ffa944;
    }
  }
  &/deep/.swiper {
    img {
      width: 100%;
      height: 402px;
      cursor: pointer;
    }
    .swiper-dots {
      display: flex !important;
      justify-content: flex-end;
      margin-top: -38px;
    }
    .swiper-dots li {
      width: 22px;
      height: 22px;
      line-height: 22px;
      border-radius: 50%;
      background: #333;
      text-align: center;
      margin-right: 10px;
      z-index: 9;
    }
    .swiper-dots li a {
      color: #fff;
    }
    .swiper-dots .slick-active {
      background: #0084ff;
    }
  }
}
</style>
